<template>
    <div class="error-emote-container">
        <div class="error-emote-error">
            <div class="error-emote-emote">
                <svg class="error-emote-icon" viewBox="0 0 100 100">
                    <circle cx="50" cy="50" r="48" />
                    <path d="M15,25 L35,45 Z" />
                    <path d="M35,25 L15,45 Z" />
                    <path d="M65,25 L85,45 Z" />
                    <path d="M85,25 L65,45 Z" />
                    <path d="M25,75 C25,50 75,50 75,75" />
                </svg>
            </div>
            <div class="error-emote-desc">
                <span>ERROR</span>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: "ErrorEmote",
    components: {},
    data() {
        return {
        }
    },
    computed: {},
    methods: {

    },
    mounted() {
    }
}
</script>

<style scoped>
.error-emote-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-emote-error {
    width: 100px;
    height: 140px;
    position: relative;
}

.error-emote-emote {
    width: 100px;
    height: 100px;
    position: relative;
    top: 0;
    user-select: none;
    margin: 0;
    padding: 0;
}

.error-emote-icon {
    stroke: black;
    fill: transparent;
    stroke-width: 4px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.error-emote-desc {
    width: 100px;
    height: 40px;
    text-align: center;
}

.error-emote-desc>span {
    font-size: 20px;
}
</style>